<script setup lang="ts">
import { computed, onMounted, reactive, ref } from 'vue'
import { getMonthStat, getMonthReturnStat } from '../../../api/index'
import BaseEcharts from '../BaseEcharts.vue';
onMounted(() => {
  const today = new Date();
  const year = today.getFullYear();
  handleChange(year);
})
const props = defineProps<{ title: string }>();
// 当前年份借阅数量
const arrData1 = ref([12, 34, 5, 56, 23, 3, 67, 32, 57, 23,]);
// 当前年份归还
// const arrData2 = ref([93,2,4,21,6,2,5,7,33,5,523]);
// 查询到的年份
let value3 = ref(0);


let showRow1 = ref(false)
let showRow2 = ref(false)
// 借阅option
const option1 = reactive({
  title: {
    subTextStyle: {
      fontSize: 16,
      fontWeight: "normal",
      left: "center",
      y: "center",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        width: 1,
        color: "#008000",
      },
    },
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "3%",
    top: "30px",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    axisLabel: {
      textStyle:{
        fontSize:14,
      },
      margin: 8,
      interval: 0, // 强制显示所有名称
      formatter: function (params: any) {
        var val = "";
        // 超过四个字隐藏
        if (params.length > 4) {
          val = params.substr(0, 4) + '...';
          return val;
        } else {
          return params;
        }
      }
    }
  },
  yAxis: {
    textStyle:{
        fontSize:14,
      },
    axisLabel: {
      formatter: (val: number) => {
        return val;
      },
    },
  },
  series: [
    {
      name: "借阅",
      type: "line",
      stack: "Total",
      data: [200, 301, 402, 503, 604, 705, 806, 323, 124, 36, 6, 26, 7],
      areaStyle: {},
      itemStyle: {
        color: 'rgb(177,176,132)'
      }, smooth: true
    }
  ],
})

// 归还option
const option2 = reactive({
  title: {
    subTextStyle: {
      fontSize: 16,
      fontWeight: "normal",
      left: "center",
      y: "center",
    },
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      lineStyle: {
        width: 1,
        color: "#008000",
      },
    },
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "3%",
    top: "30px",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: arrData1.value.map<string>((el: any, index: number) => {
      console.log(el);
      return index + '月'
    }),
    axisLabel: {
      textStyle:{
        fontSize:14,
      },
      interval: 0,
      rotate: 30,
    },
  },
  yAxis: {
    axisLabel: {
      textStyle:{
        fontSize:14,
      },
      formatter: (val: number) => {
        return val;
      },
    },
  },
  series: [
    {
      name: "归还",
      type: "line",
      stack: "Total",
      data: [200, 301, 402, 503, 604, 705, 806, 323, 124, 36, 6, 26, 7].reverse(),
      areaStyle: {},
      itemStyle: {
        color: 'rgb(177,176,132)'
      }, smooth: true
    }
  ],
})
// 当前年份
let titles = computed(() => {
  return props.title.split('&');
})

const handleChange = (val: any) => {
  showRow1.value = false;
  showRow2.value = false;
  getMonthStat(val).then((res: any) => {
    let arr = res.data || [];
    option1.xAxis.data = arr.map((el: any) => {
      return el.createMonth + '月';
    })
    option1.series[0].data = arr.map((el: any) => {
      return el.receiveNumber;
    })||[];
    showRow1.value = true;
  })
  getMonthReturnStat(val).then((res: any) => {
    let arr = res.data || [];
    option2.xAxis.data = arr.map((el: any) => {
      return el.createMonth + '月';
    })
    option2.series[0].data = arr.map((el: any) => {
      return el.returnNumber;
    });
    showRow2.value = true;
  })
}
</script>

<template>
  <div class="toptitlemain centered-gradient">

    <div class="selecter">
      <el-date-picker v-model="value3" format="YYYY" value-format="YYYY" type="year" :placeholder="new Date().getFullYear()" size="small" 
        @change="handleChange" />
    </div>
    <div class="borrow sub">
      <div class="bx-title">
        {{ titles[0] }}
      </div>
      <BaseEcharts v-if="showRow1" :options="option1" />
    </div>
    <div class="return sub" style="margin-top: 1vh;">
      <div class="bx-title">
        {{ titles[1] }}
      </div>
      <BaseEcharts v-if="showRow2" :options="option2" />
    </div>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}

.toptitlemain {
  width: 100%;
  height: 58vh;
  display: flex;
  border: 1px solid rgb(92, 98, 107);
  border-radius: 10px;
  padding: 0 1vw;
  box-sizing: border-box;
  color: rgb(192, 215, 255);
  margin-bottom: .5vh;
  flex-direction: column;
  position: relative;

  .sub {
    height: 48%;
  }

  :deep .selecter {
    position: absolute;
    top: 1vh;
    right: 1vh;
    z-index: 2;
  }
}
.bx-title{
  font-size: 16px;
}
</style>
